<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-03-29 19:02:58
 * @LastEditTime : 2023-09-18 11:57:33
-->
<script setup lang="ts" name="IkFormItemTitle">
import type { PropType } from 'vue'

defineProps({
  // 绑定的prop
  prop: {
    type: String,
    default: ''
  },
  // label
  label: {
    type: String,
    default: ''
  },
  // 小标题title
  title: {
    type: String,
    default: ''
  },
  // 检验规则
  rules: {
    type: Array as PropType<any[]>,
    default: () => []
  }
})
</script>

<template>
  <el-form-item :prop="prop" :rules="rules">
    <template #label>
      {{ label }}
      <span v-if="!$slots.title" class="sub-title">
        {{ title }}
      </span>
      <slot v-else name="title"></slot>
    </template>
    <slot></slot>
  </el-form-item>
</template>

<style lang="scss" scoped>
.sub-title{
  font-size: 12px;
  color: var(--ik-vice-text-color);
}
</style>
